


let chartData = [

    {
        SO2: [54, 76, 23, 43, 65, 87, 67, 45, 45, 84, 45, 34],
    },
    {
        NO2: [87, 53, 56, 54, 113, 15, 87, 23, 45, 84, 34, 54],
    },


];
let colorArr = [
    '#ead656',
    '#fe7c4b',
    '#23b899',
    '#9c6cff',
    '#008ca1',
    '#dca111',
    '#00d2ec',
    '#004aa0',
    '#5e42d2',
    '#387dff',
    '#ead656',
];
let yarrlength = 0; 
let series = [];
let xarr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];

let yarrx = ['当日新增', '现有确诊'];

yarrlength = chartData.length;
let stationArr = [];
for (var i = 0; i < yarrlength; i++) {
    stationArr.push({ avgval: [] });
}

for (var j = 0; j < yarrlength; j++) {
    for (let key in chartData[j]) {
        stationArr[j].avgval = chartData[j][key];
    }
}

for (var k = 0; k < yarrlength; k++) {
    series.push({
        name: yarrx[k],
        type: 'line',
        symbolSize: 8,
        data: stationArr[k].avgval,
        smooth: true,
        areaStyle: {
            color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1, // 变化度
                // 三种由深及浅的颜色
                [
                    {
                        offset: 0,
                        color: colorArr[k],
                    },
                    {
                        offset: 0.8,
                        color: 'rgba(255,255,255,0.1)',
                    },
                    {
                        offset: 1,
                        color: 'rgba(0,0,0,0.1)',
                    },
                ]
            ),
            type: 'linear',
            global: false,
        },
    });
}
let selectedObj = {};

series.forEach((item, index) => {
    if (index === 0) {
        selectedObj[item.name] = true;
    } else {
        selectedObj[item.name] = false;
    }
});


var ec_left1 = echarts.init(document.getElementById('l1'),'macarons');
var ec_left1_Option = {

    title : {
	    text : "全国疫情趋势",
	    textStyle : {
	        color : 'white',
	    },
	    left : 'left'
	},

    legend: {
        type: 'scroll',
        right: '60',
        selectedMode: 'single',
        bottom: '3%',
        left: 'center',
        inactiveColor: '#666',
        textStyle: {
            // color: '#aaa',
            color: '#fff',
        },
        selected: selectedObj,
        // selected: [],
        top:20
    },
    tooltip: {
        trigger: 'axis',
        show: true,
        top:20
    },


    grid: {
        left: 0,
        right: 15,
        bottom: '0%',
        containLabel: true,
    },
    xAxis: {
        type: 'category',
        data: xarr,
        // data: [],
        axisTick: {
            show: false,
        },
        axisLine: {
            color: 'rgba(255,255,255,0.6)',
        },
        axisLabel: {
            margin: 30,
            // color: 'rgba(255,255,255,0.6)',
            textStyle: {
                color:'#fff',
            },
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'solid',
                color: 'rgba(255,255,255,0.1)',
            },
        },
    },
    yAxis: {
        type: 'value',
        axisTick: {
            show: false,
        },
        axisLine: {
            // color: 'rgba(255,255,255,0.6)',
            lineStyle: {
                color: '#57617B'
            }
        },
        axisLabel: {
            show: true,
            margin: 30,
            // color: 'rgba(255,255,255,0.6)',
            color: '#fff',
            fontSize: 12,
			formatter: function(value) {
				if (value >= 1000) {
					value = value / 1000 + 'k';
				}
				return value;
			}
        },

        splitLine: {
            lineStyle: {
                type: 'dashed',
                color: 'rgba(255,255,255,0.1)',
            },
        },
    },
    color: colorArr,
    // color: [],

};
ec_left1_Option.series = series;

ec_left1.setOption(ec_left1_Option)

window.addEventListener("resize", function () {
    ec_left1.resize();
});